<script lang="ts" setup>
import EZUIKit from "ezuikit-js";
import { onMounted } from "vue";
import {cameraApi} from "@/api/index"



const getysToken = async() => {

    const response = await cameraApi.getToken();
    console.log('API响应:', response);
    // 从响应中提取 token
    let token: string;
    if (typeof response === 'string') {
      // 如果响应直接是字符串，就使用它
      token = response;
    } else if (response && typeof response === 'object') {
      // 如果响应是对象，尝试获取 data 属性
      token = response.data;
    } else {
      throw new Error('无效的 token 格式');
    }

    if (!token || typeof token !== 'string') {
      throw new Error('无法获取有效的 token');
    }

    console.log('使用的token:', token);

}
interface IPlayer {
  play: Function;
  stop: Function;
  getOSDTime: Function;
  capturePicture: Function;
  openSound: Function;
  closeSound: Function;
  startSave: Function;
  stopSave: Function;
  startTalk: Function;
  stopTalk: Function;
  fullScreen: Function;
  destroy: Function;
}

let player: IPlayer;

const play = () => {
  const playPromise = player.play();
  playPromise.then((data: any) => {
    console.log("promise 获取 数据", data);
  });
};

const stop = () => {
  const stopPromise = player.stop();
  stopPromise.then((data: any) => {
    console.log("promise 获取 数据", data);
  });
};

const getOSDTime = () => {
  const getOSDTimePromise = player.getOSDTime();
  getOSDTimePromise.then((data: any) => {
    console.log("promise 获取 数据", data);
  });
};

const capturePicture = () => {
  const capturePicturePromise = player.capturePicture(
      `${new Date().getTime()}`
  );
  capturePicturePromise.then((data: any) => {
    console.log("promise 获取 数据", data);
  });
};

const openSound = () => {
  const openSoundPromise = player.openSound();
  openSoundPromise.then((data: any) => {
    console.log("promise 获取 数据", data);
  });
};

const closeSound = () => {
  const openSoundPromise = player.closeSound();
  openSoundPromise.then((data: any) => {
    console.log("promise 获取 数据", data);
  });
};

const startSave = () => {
  const startSavePromise = player.startSave(`${new Date().getTime()}`);
  startSavePromise.then((data: any) => {
    console.log("promise 获取 数据", data);
  });
};

const stopSave = () => {
  const stopSavePromise = player.stopSave();
  stopSavePromise.then((data: any) => {
    console.log("promise 获取 数据", data);
  });
};

const ezopenStartTalk = () => {
  player.startTalk();
};

const ezopenStopTalk = () => {
  player.stopTalk();
};

const fullScreen = () => {
  player.fullScreen();
};

const destroy = () => {
  const destroyPromise = player.destroy();
  destroyPromise.then((data: any) => {
    console.log("promise 获取 数据", data);
  });
  player = null!;
};

const init = () => {
  // 获取 token

  if (player) {
    destroy();
  }

  player = new EZUIKit.EZUIKitPlayer({
    id: "video-container",
    accessToken:"ra.5re72ai38g4y7gky9ghls5dzb2equqku-491d6ysuja-0bzlevz-5zrd54nns",
    url: "ezopen://open.ys7.com/AB9831171/1.hd.live",
    template: "pcLive",
    plugin: ["talk"],
    width: 750,
    height: 360,
    handleError: (err: any) => {
      console.error("handleError", err);
    },
    env: {
      domain: "https://open.ys7.com",
    },
  });
  window.player = player;
};

onMounted(() => {
  init();
});
</script>

<template>
  <div class="video-wrapper">
    <div class="video-container" id="video-container"></div>
  </div>
</template>

<style scoped>
.video-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px;
  box-sizing: border-box;
}

.video-container {
  width: 100%;
  height: 0;
  padding-bottom: 75%; /* 4:3 比例 */
  position: relative;
  background: #000;
  border-radius: 4px;
  overflow: hidden;
  max-width: calc(100% - 16px); /* 留出边距 */
  max-height: calc(100% - 16px);
  margin: auto;
}

.video-container :deep(video),
.video-container :deep(#video-container) {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 控件样式 */
.video-container :deep(.audio-controls),
.video-container :deep(.video-controls) {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
}

/* 全屏模式 */
.video-container:fullscreen,
.video-container :deep(#video-container:fullscreen) {
  padding-bottom: 0;
  height: 100vh;
}
</style>

